<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<div class="navbar navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container-fluid">
				<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</a>
				<a class="brand" href="javescript:;" style="color:#E5E0E8">CRM</a>
				<div class="nav-collapse">
		  		<ul class="nav">
						<li class="divider-vertical"></li>
						<li class="${param.tag == 'main' ? 'active' : ''}"><a href="${basePath }/mecrm/user/main">概览</a></li>
						<li class="divider-vertical"></li>
						<li class="${param.tag == 'contact' ? 'active' : ''}"><a href="${basePath }/mecrm/contact/list">通讯录</a></li>
						<li class="divider-vertical"></li>
						<li class="${param.tag == 'task' ? 'active' : ''}"><a href="${basePath }/mecrm/task/list">任务</a></li>
						<li class="divider-vertical"></li>
						<li class="${param.tag == 'deal' ? 'active' : ''}"><a href="${basePath }/mecrm/deal/list">机会</a></li>
						<li class="divider-vertical"></li>
						<li class="divider-vertical"></li>
			    </ul>
					
				<ul class="nav">
				  	<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
					    添加
					    <span class="caret"></span>
					  </a>
					  <ul class="dropdown-menu new-actions">
					    <li style="align:left;"><a href="${basePath }/mecrm/contact/new"><i class="icon-person"></i> 联系人</a></li>
						<li><a href="${basePath }/mecrm/contact/newcompany"><i class="icon-company"></i> 公司</a></li>
						<li class="divider"></li>
						<li><a data-toggle="modal" href="#taskModal"><i class="icon-ok"></i> 任务</a></li>
						<li><a href="${basePath }/mecrm/deal/new"><i class="icon-dollar"></i> 机会</a></li>
					  </ul>
					</li>
				</ul>
				
					<ul class="nav">
						<li class="divider-vertical"></li>
					</ul>
					
					<form class="navbar-search">
						<input type="text" name="search" id="search" class="search-query mp_input " placeholder="搜索联系人或机会" autocomplete="off">
						<ul class="typeahead dropdown-menu mp_list" style="display: none; "></ul>
					</form>
					
					<ul class="nav pull-right">
						<li class=""><a href="javascript:;">${user.username }</a></li>
						<li class=""><a href="${basePath }/mecrm/user/setting">管理</a></li>
						<li class="divider-vertical"></li>
						<li class=""><a href="${basePath }/mecrm/user/index">退出</a></li>
					</ul>
				</div>
		  </div>
	  </div>
  </div>
  
  	<div class="modal hide" id="taskModal">
		<form accept-charset="UTF-8" action="${basePath}/mecrm/task/add" class="simple_form new_schedule" id="task_form" method="post" >	
			
			<input id="context" name="context" type="hidden" value="tasks">
			<input id="filter_task_category_id" name="filter_task_category_id" type="hidden">
			<input id="user_id" name="user.id" type="hidden" value="${user.id }">
			<input id="deal_id" name="deal.id" type="hidden" value=${deal.id }>
			<input id="contact_id" name="contact.id" type="hidden" value="${contact.id }">
			
			
			<div class="modal-header">
				<a class="close" data-dismiss="modal">×</a>
				<h3>添加一个任务</h3>
			</div>
			
			<div class="modal-body">
				<div class="control-group string optional">
					<div class="controls">
						<input class="string optional span5" id="task_title" name="task.title" size="50" type="text" placeholder="请输入任务名称">
					</div>
				</div>
			
				<div class="control-group string optional">
					<label class="string optional control-label" for="schedule_frame"> 到期时间？</label>
					<div class="controls">
						<select id="task_frame" name="time" onchange="change_task_frame($(this).val(), '#calendar_date_start','#calendar_date_end')">
							<option value="today" selected="selected">今天</option>
							<option value="tomorrow">明天</option>
							<option value="calendar">设置具体时间 ...</option>
						</select>
					</div>
				</div>		
				<div id="calendar_date_select">
					<input id="calendar_date_start" name="task.startdate" type="text" onclick="WdatePicker({minDate:'%y-%M-{%d}',readOnly:true,dateFmt:'yyyy-MM-dd  HH:mm:ss',lang:'zh-cn'})" class="Wdate span2" placeholder="请输入开始时间" style=" width:200px ;display:none; "/>
					&nbsp;&nbsp;&nbsp;&nbsp;
					<input id="calendar_date_end" name="task.enddate" type="text" onclick="WdatePicker({readOnly:true,minDate:'#F{$dp.$D(\'calendar_date_start\')}',dateFmt:'yyyy-MM-dd  HH:mm:ss',lang:'zh-cn'})" class="Wdate span2" placeholder="请输入结束时间" style=" width:200px ;display:none; "/>
				</div>
				
				<div class="control-group integer optional">
					<label class="integer optional control-label" for="tasktype_id"> 选择一个分类</label>
					<div class="controls">
						<select  id="tasktype_id" name="tasktype.id" onchange="changeType(this)">
							<option value="">无</option>
							
							<c:forEach items="${tasktypeList}" var="tasktype">
								<option value="${tasktype.id }">${tasktype.type }</option>
							</c:forEach>
							
							<option value="new">添加分类 ...</option>
						</select>
						<a href="${basePath }/mecrm/task/tasktype">编辑分类</a>
					</div>
				</div>	
			
			</div>
			
			<div class="modal-footer" style="text-align:left;">
				<input class="btn btn-primary" name="commit" type="submit" value="添加这个任务">
				<a href="#" class="btn" data-dismiss="modal">取消</a>
			</div>
		</form>
	</div>
	
	<script type="text/javascript">
		function changeType(a){
			if($(a).val() != "new") return;
			
			var name = prompt("请输入新分类的名称:","");
			if(name != "") {
				$.post("${basePath}/mecrm/task/addtype",{"tasktype.type":name},function(b){
					$(a).children(":first").before("<option selected='selected' value='" + b.typeid+ "'>" + b.type+ "</option>");
				});
			}
		}
	</script>
	
	<script type="text/javascript" charset="utf-8">
		function change_task_frame(a, b,c) {
			if(a == "calendar") {
			 	$(b).show(), $(c).show();
			} else {
				$(b).hide(), $(c).hide();
			}
		}
			$("#taskModal").on('shown', function() {
				$('#task_name').focus();
			});
		</script>